<template>
  <div class="schedule-container">
    <el-card class="schedule-card">
      <template #header>
        <div class="schedule-header">
          <h2>我的课程表</h2>
          <div class="schedule-actions">
            <el-select v-model="selectedTerm" placeholder="选择学期" style="width: 180px; margin-right: 10px;">
              <el-option label="2023-2024 第一学期" value="2023-1"></el-option>
              <el-option label="2023-2024 第二学期" value="2023-2"></el-option>
            </el-select>
            <el-button type="primary" @click="printSchedule">
              <el-icon><Printer /></el-icon>打印课表
            </el-button>
          </div>
        </div>
      </template>
      
      <div class="schedule-content">
        <div v-if="courseStore.selectedCourses.length === 0" class="empty-schedule">
          <el-empty description="暂无课程，请前往选课中心添加课程">
            <el-button type="primary" @click="$router.push('/course-selection')">前往选课</el-button>
          </el-empty>
        </div>
        
        <div v-else class="schedule-table">
          <!-- 课程表头 -->
          <div class="schedule-table-header">
            <div class="time-column">时间</div>
            <div class="day-column" v-for="day in weekDays" :key="day.value">
              {{ day.label }}
            </div>
          </div>
          
          <!-- 课程表内容 -->
          <div class="schedule-table-content">
            <div v-for="(timeSlot, index) in timeSlots" :key="index" class="time-row">
              <!-- 时间列 -->
              <div class="time-cell">
                <div>{{ timeSlot.label }}</div>
                <div class="time-range">{{ timeSlot.range }}</div>
              </div>
              
              <!-- 每天的课程 -->
              <div v-for="day in weekDays" :key="`${day.value}-${index}`" class="course-cell">
                <template v-for="course in getCourseByTimeAndDay(timeSlot, day.value)" :key="course.id">
                  <div 
                    class="course-item" 
                    :class="getCourseColorClass(course)"
                    @click="showCourseDetail(course)"
                  >
                    <div class="course-name">{{ course.name }}</div>
                    <div class="course-teacher">{{ course.teacher }}</div>
                    <div class="course-location">{{ getCourseLocation(course, day.value) }}</div>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    
    <!-- 课程详情对话框 -->
    <el-dialog
      v-model="courseDetailVisible"
      title="课程详情"
      width="500px"
    >
      <div v-if="selectedCourse" class="course-detail">
        <h3>{{ selectedCourse.name }} <el-tag>{{ selectedCourse.code }}</el-tag></h3>
        <div class="detail-item">
          <span class="detail-label">教师：</span>
          <span>{{ selectedCourse.teacher }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">学分：</span>
          <span>{{ selectedCourse.credits }} 学分</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">类型：</span>
          <span>{{ selectedCourse.type }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">上课时间：</span>
          <div>
            <div v-for="(s, index) in selectedCourse.schedule" :key="index">
              {{ getDayText(s.day) }} {{ s.startTime }} - {{ s.endTime }} ({{ s.location }})
            </div>
          </div>
        </div>
        <div class="detail-item">
          <span class="detail-label">课程描述：</span>
          <p>{{ selectedCourse.description }}</p>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="danger" @click="dropCourse">退选课程</el-button>
          <el-button @click="courseDetailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useCourseStore } from '../../stores/course'
import { ElMessage, ElMessageBox } from 'element-plus'

const courseStore = useCourseStore()

// 学期选择
const selectedTerm = ref('2023-2')

// 课程详情
const courseDetailVisible = ref(false)
const selectedCourse = ref(null)

// 星期几
const weekDays = [
  { label: '周一', value: 1 },
  { label: '周二', value: 2 },
  { label: '周三', value: 3 },
  { label: '周四', value: 4 },
  { label: '周五', value: 5 },
  { label: '周六', value: 6 },
  { label: '周日', value: 7 }
]

// 时间段
const timeSlots = [
  { label: '第1-2节', range: '8:00-9:40', startTime: '8:00', endTime: '9:40' },
  { label: '第3-4节', range: '10:00-11:40', startTime: '10:00', endTime: '11:40' },
  { label: '第5-6节', range: '14:00-15:40', startTime: '14:00', endTime: '15:40' },
  { label: '第7-8节', range: '16:00-17:40', startTime: '16:00', endTime: '17:40' },
  { label: '第9-10节', range: '19:00-20:40', startTime: '19:00', endTime: '20:40' }
]

// 根据时间和星期获取课程
const getCourseByTimeAndDay = (timeSlot, day) => {
  return courseStore.selectedCourses.filter(course => {
    return course.schedule.some(schedule => {
      return schedule.day === day && 
             schedule.startTime === timeSlot.startTime && 
             schedule.endTime === timeSlot.endTime
    })
  })
}

// 获取课程地点
const getCourseLocation = (course, day) => {
  const schedule = course.schedule.find(s => s.day === day)
  return schedule ? schedule.location : ''
}

// 获取课程颜色类
const getCourseColorClass = (course) => {
  const courseIndex = courseStore.selectedCourses.findIndex(c => c.id === course.id)
  const colorIndex = courseIndex % 5
  return `course-color-${colorIndex}`
}

// 显示课程详情
const showCourseDetail = (course) => {
  selectedCourse.value = course
  courseDetailVisible.value = true
}

// 获取星期文本
const getDayText = (day) => {
  const dayObj = weekDays.find(d => d.value === day)
  return dayObj ? dayObj.label : ''
}

// 退选课程
const dropCourse = () => {
  if (!selectedCourse.value) return
  
  ElMessageBox.confirm(
    `确定要退选课程 "${selectedCourse.value.name}" 吗？`,
    '退选确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    courseStore.dropCourse(selectedCourse.value.id)
    ElMessage.success('退选成功')
    courseDetailVisible.value = false
  }).catch(() => {})
}

// 打印课表
const printSchedule = () => {
  window.print()
}
</script>

<style scoped>
.schedule-container {
  padding: 0 10px;
}

.schedule-card {
  margin-bottom: 20px;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-header h2 {
  margin: 0;
  font-size: 18px;
}

.schedule-actions {
  display: flex;
  align-items: center;
}

.schedule-content {
  margin-top: 10px;
}

.empty-schedule {
  padding: 40px 0;
}

.schedule-table {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.schedule-table-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.time-column,
.day-column {
  padding: 12px;
  text-align: center;
  font-weight: bold;
}

.time-column {
  width: 120px;
  border-right: 1px solid #ebeef5;
}

.day-column {
  flex: 1;
  border-right: 1px solid #ebeef5;
}

.day-column:last-child {
  border-right: none;
}

.time-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.time-row:last-child {
  border-bottom: none;
}

.time-cell {
  width: 120px;
  padding: 10px;
  border-right: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.time-range {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.course-cell {
  flex: 1;
  min-height: 100px;
  padding: 5px;
  border-right: 1px solid #ebeef5;
  position: relative;
}

.course-cell:last-child {
  border-right: none;
}

.course-item {
  background-color: #ecf5ff;
  border-radius: 4px;
  padding: 8px;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s;
}

.course-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.course-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.course-teacher {
  font-size: 12px;
  color: #606266;
  margin-bottom: 3px;
}

.course-location {
  font-size: 12px;
  color: #909399;
}

/* 课程颜色 */
.course-color-0 {
  background-color: #ecf5ff;
  color: #409eff;
}

.course-color-1 {
  background-color: #f0f9eb;
  color: #67c23a;
}

.course-color-2 {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.course-color-3 {
  background-color: #fef0f0;
  color: #f56c6c;
}

.course-color-4 {
  background-color: #f5f7fa;
  color: #909399;
}

/* 课程详情 */
.course-detail {
  padding: 10px;
}

.course-detail h3 {
  margin-top: 0;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-item {
  margin-bottom: 12px;
  display: flex;
}

.detail-label {
  font-weight: bold;
  margin-right: 10px;
  min-width: 80px;
}

/* 打印样式 */
@media print {
  .schedule-actions,
  .el-dialog,
  .el-button {
    display: none !important;
  }
  
  .schedule-container,
  .schedule-card {
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
  }
}
</style> 